import React, { Component } from 'react';
import { Form, Input, Button } from 'antd';
import './login.less';
import "antd/dist/antd.css";
import * as rest from "../../lib/rest";

class Login extends Component{
    constructor(props){
        super(props);
        this.state={
            userName:'',
            password:'',
            display:true
        }
        
    }

    onFinish = (values) => {
        let username = values.username;
        let password = values.password;       

        rest.post(`/auth/login`,{"username":username,"password":password}).then((result)=>{
            if('normalLogin'===result){
                sessionStorage.setItem("loginStatus", "OK")
                this.props.history.push('/home');
            }else{
                this.setState({
                    display:false
                })
            }              
        }).catch(()=>{
            this.setState({
                display:false
            })
        });
      
      };
    
    render(){
        const {display} = this.state;
        return(
            <div className = "login">
                <div className= "login-form">
                    <Form labelCol = {{span:5}} wrapperCol = {{span:20}} name="login" onFinish={this.onFinish} >
                        <Form.Item label="用户名" name="username" rules={[{ required: true, message: 'Please input your username!' }]}>
                            <Input placeholder = "请输入用户名"/>
                        </Form.Item>
                        <Form.Item label="密码"
                            name="password"
                            style={{marginBottom:"2px"}}
                            rules={[{ required: true, message: 'Please input your password!' }]}
                        >
                            <Input.Password placeholder="密码"/>
                        </Form.Item>
                        <Form.Item 
                            wrapperCol={{offset:5}}
                            hidden={display} 
                            name="remind" 
                            style={{marginBottom:"0px"}}
                            >
                            <span  className="required">*请输入正确的账号和密码 </span>
                        </Form.Item>
                        <Form.Item 
                            wrapperCol={{offset:5}}
                            style={{marginTop:display?'24px':'4px'}}>
                            <Button type="primary" htmlType="submit">
                            登录
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
            </div>
        )
    }
}
export default Login;

